<template>
    <div id='add'>
        <p>
            <P></P> -- 添加商品
        </p>
        <div class="box">
            <el-form :model="obj" :rules="rules" ref="ruleForm" label-width="80px">
                <el-form-item label="商品名称" prop="name">
                    <el-input v-model="obj.name"></el-input>
                </el-form-item>
                <el-form-item label="商品描述" prop="subtitle">
                    <el-input v-model="obj.subtitle"></el-input>
                </el-form-item>
                <el-form-item label="所属分类">
                    <el-select v-model="value" placeholder="请选择一级分类" @change="two" style="margin-right:30px;">
                        <el-option v-for="item in options" :key="item.value" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                    <el-select v-model="value2" v-show="v2flag" placeholder="请选择二级分类">
                        <el-option v-for="item in options2" :key="item.value" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="商品价格">
                    <el-input type="number" v-model="obj.price">
                        <template #append>元</template>
                    </el-input>

                </el-form-item>
                <el-form-item label="商品库存">
                    <el-input type="number" v-model="obj.stock">
                        <template #append>件</template>
                    </el-input>
                </el-form-item>
                <el-form-item label="商品图片">
                    <el-upload action="api/product/upload.do" :on-preview="handlePreview" name="upload_file"
                        :on-remove="handleRemove" :before-remove="beforeRemove" multiple :on-exceed="handleExceed"
                        list-type="picture-card" :on-success="upLoaded">
                        <el-button size="small" type="primary">点击上传</el-button>
                    </el-upload>
                    <!-- <img style="width:100px; height:100px; margin-rigth:30px;" v-for="(image,key) in imgArr" :key="key"
                        :src="'http://img.happymmall.com/'+image" alt=""> -->
                </el-form-item>
            </el-form>
            <p>商品详情<br>
                <quill-editor style="height:200px; margin-bottom:100px;" v-model="obj.detail" ref="myQuillEditor"
                    :options="editorOption">
                </quill-editor>
            </p>
            <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
        </div>
    </div>
</template>

<script>
    import {
        quillEditor
    } from "vue-quill-editor"; //调用编辑器
    import 'quill/dist/quill.core.css';
    import 'quill/dist/quill.snow.css';
    import 'quill/dist/quill.bubble.css';

    import P from '../P.vue';
    import {
        productAdd,
        options,
        options2,
    } from '../../../api/index'
    import Vue from 'vue'
    import {
        Form,
        FormItem,
        Input,
        Button,
        Cascader,
        Select,
        Option,
        Upload,
        MessageBox,
    } from 'element-ui'

    Vue.prototype.$confirm = MessageBox.confirm;
    export default {
        components: {
            P,
            'el-form': Form,
            'el-form-item': FormItem,
            'el-input': Input,
            'el-button': Button,
            'el-cascader': Cascader,
            'el-select': Select,
            'el-option': Option,
            'el-upload': Upload,
            quillEditor
        },
        data() {
            return {
                flag: false,
                v2flag: false, //二级子类选择器是否显示
                cities: [],
                cities2: [],
                value: '', //一级子类id
                value2: '', //二级子类id
                valueId: '',
                childrenValue: '',
                options: [], //一级子类
                options2: [], //二级子类
                obj: {
                    categoryId: 0,
                    name: '', //名称
                    subtitle: '', //描述
                    subImages: '', //图片
                    detail: '', //详情
                    price: '', //单价
                    stock: '', //库存
                    status: 1, //状态默认1在售状态
                }, //图片
                content: '',
                editorOption: {},
                rules: {
                    name: [{
                            required: true,
                            message: '请输入商品名称',
                            trigger: 'blur'
                        },
                        {
                            min: 3,
                            max: 30,
                            message: '长度在 3 到 30 个字符',
                            trigger: 'blur'
                        }
                    ],
                    subtitle: [{
                            required: true,
                            message: '请输入商品描述',
                            trigger: 'blur'
                        },
                        {
                            min: 3,
                            max: 30,
                            message: '长度在 3 到 30 个字符',
                            trigger: 'blur'
                        }
                    ],
                },
                imgArr: [], //上传的图片名
                str: '' //imgArr转换的字符串
            };
        },
        methods: {
            upLoaded(response, file, fileList) {
                console.log(response);
                this.imgArr.push(response.data.uri)
                this.str = this.imgArr.join(',')
                this.obj.subImages = this.str

            },
            handleRemove(file, fileList) {
                // console.log(file, fileList);
                var index = this.imgArr.findIndex(item => {
                    return item == file.response.data.uri
                })
                this.imgArr.splice(index, 1)
                this.str = this.imgArr.join(',')
                this.obj.subImages = this.str
                // console.log(this.str);

            },
            handlePreview(file) {},
            handleExceed(files, fileList) {
                this.$message.warning(
                    `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
            },
            beforeRemove(file, fileList) {

                return this.$confirm(`确定移除 ${ file.name }？`)
            },
            async two() {
                let res = await options2({
                    categoryId: this.value
                })
                // console.log(res);
                this.options2 = res.data.data
                this.value2 = ''
                this.v2flag = true

            },
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        var obj = {
                            categoryId: 0,
                            name: this.obj.name, //名称
                            subtitle: this.obj.subtitle, //描述
                            subImages: this.obj.subImages, //图片
                            detail: this.obj.detail, //详情
                            price: this.obj.price, //单价
                            stock: this.obj.stock, //库存
                            status: 1, //状态默认1在售状态
                        }
                        productAdd(obj).then(res => {
                            if (res.data.data == '新增产品成功') {
                                this.$message({
                                    message: `${res.data.data}`,
                                    type: 'success'
                                });
                                this.$router.push('/product/index')
                            } else {}
                        })
                    } else {
                        return false;
                    }
                });
            },
            async getopt() {
                let res = await options()
                this.options = res.data.data
            },
        },
        mounted() {
            this.getopt()

        },
        computed: {
            editor() {
                return this.$refs.myQuillEditor.quill;
            },
        },
    }
</script>
<style lang='scss' scoped>
    #add {
        &>p {
            display: flex;
            font-size: 35px;
            align-items: center;
            // background: #000;
        }

        .box {
            width: 600px;
            // margin: 0 auto;
            margin-left: 60px;
            margin-top: 30px;
        }
    }
</style>